<template>
  <div class="container">
    <!--  -->
    <!-- 左侧主要内容展示区 -->
    <div class="left">
      <div class="label">HtmlShower 组件</div>
      <div class="text">
        该组件用来展示 HTML
        代码，传入一段代码，展现格式化之后的代码，并且具有代码高亮效果
      </div>

      <div class="label">组件效果</div>

      <FoldPanel>
        <template #top>
          <HtmlShower :htmlStr="htmlStr1"> </HtmlShower>
        </template>
        <template #bottom>
          <HtmlShower :htmlStr="htmlStr2" :border="false"> </HtmlShower>
          <JsShower :jsStr="jsStr1" :border="false"></JsShower>
        </template>
      </FoldPanel>
    </div>

    <!--  -->
    <!-- 右侧辅助功能栏 -->
    <div class="right"></div>
  </div>
</template>

<script lang="tsx" setup>
import { HtmlShower, JsShower, FoldPanel } from '@/customComponents/components'

const htmlStr1 = `
      <template>
        <div class="label">HtmlShower 组件</div>
          <div class="text">
            该组件用来展示代码，传入一段代码，展现格式化之后的代码
          </div>
          <div class="codeBox">
            <div class="lineNumber">
              <div v-for="item in linesArray.length" :key="item" disable>
                {{ 1 ? item : 2 }}
              </div>
            </div>
            <div id="codeDisplay"></div>
          </div>
      </template>
`

const htmlStr2 = `
      <template>
        <HtmlShower :htmlStr="htmlStr1"> </HtmlShower>
      </template>
`

const jsStr1 = `
import { HtmlShower, JsShower, FoldPanel } from '@/customComponents/components'

const htmlStr1 ='HTML代码片段'
`
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;

  > .left {
    width: 76%;
  }
  > .right {
    width: 24%;
  }
}

.label {
  font-size: 17px;
  color: #606266;
  letter-spacing: 1px;
  font-weight: bold;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  padding-top: 30px;
  padding-bottom: 10px;
}

.text {
  line-height: 28px;
  letter-spacing: 1px;
  color: #444444;
  font-weight: b;
}
</style>
